<template>
  <div>
    <UpmsHeader></UpmsHeader>
    <a-row :style="{minHeight:height+'px'}">
      <a-col :xs="{span:24}" :sm="{span:24}" :md="{span:6}" :lg="{span:5}" :xxl="{span:4}" class="header-left"
             style="height: 100%;">
        <LeftMenu></LeftMenu>
      </a-col>
      <a-col :xs="{span:0}" :sm="{span:0}" :md="{span:18}" :lg="{span:19}" :xxl="{span:20}">
        <router-view :style="{minHeight:(height - 60)+'px'}"></router-view>
        <UpmsFooter></UpmsFooter>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import UpmsHeader from '@/components/UpmsHeader'
  import UpmsFooter from '@/components/UpmsFooter'
  import LeftMenu from '@/components/LeftMenu'

  export default {
    name: 'Layout',
    components: {
      UpmsHeader,
      UpmsFooter,
      LeftMenu
    },
    data () {
      return {
        height: this.$store.state.screenHeight - 48
      }
    }
  }
</script>

<style scoped>

</style>
